<template>
	<view class="login-container">
		<view class="logo-box">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">音频收集系统</text>
		</view>
		
		<view class="form-box">
			<view class="input-group">
				<text class="label">用户名</text>
				<input type="text" v-model="loginForm.username" placeholder="请输入用户名" class="input" />
			</view>
			
			<view class="input-group">
				<text class="label">密码</text>
				<input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input" />
			</view>
			
			<button class="login-btn" @click="handleLogin" :disabled="loading">
				{{ loading ? '登录中...' : '登 录' }}
			</button>
			
			<view class="register-link">
				<text @click="goToRegister">没有账号？点击注册</text>
			</view>
		</view>
		
		<view class="pattern-decoration top-left"></view>
		<view class="pattern-decoration top-right"></view>
		<view class="pattern-decoration bottom-left"></view>
		<view class="pattern-decoration bottom-right"></view>
	</view>
</template>

<script>
	import { authAPI } from '../../utils/api.js';
	
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				loading: false
			}
		},
		methods: {
			handleLogin() {
				// 表单验证
				if (!this.loginForm.username || !this.loginForm.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				
				// 调用登录API
				authAPI.login(this.loginForm)
					.then(res => {
						console.log('登录响应:', res);
						
						if (res.code === 200 || res.access_token) {
							// 处理不同的响应格式
							let token = '';
							let user = {};
							
							if (res.code === 200 && res.data && res.data.token) {
								// 第一种格式：{ code: 200, data: { token: '...', user: {...} } }
								token = res.data.token;
								user = res.data.user || {};
								console.log('使用响应格式1，获取到token');
							} else if (res.access_token) {
								// 第二种格式：{ access_token: '...', user_info: {...} }
								token = res.access_token;
								user = res.user_info || {};
								console.log('使用响应格式2，获取到token');
							}
							
							if (token) {
								console.log('登录成功，获取到token:', token);
								
								// 保存token和用户信息
								uni.setStorageSync('token', token);
								uni.setStorageSync('userInfo', JSON.stringify(user));
								
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});
								
								// 跳转到首页
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 1500);
							} else {
								console.error('登录响应中没有找到token');
								uni.showToast({
									title: '登录失败，无法获取token',
									icon: 'none'
								});
							}
						} else {
							uni.showToast({
								title: res.message || res.msg || '登录失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('登录失败', err);
						uni.showToast({
							title: '登录失败，请稍后重试',
							icon: 'none'
						});
					})
					.finally(() => {
						this.loading = false;
					});
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		position: relative;
		height: 100vh;
		background-color: #E0E6E9; // 莫兰迪淡灰蓝背景
		padding: 40rpx;
		overflow: hidden;
	}
	
	.logo-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		margin-bottom: 80rpx;
		
		.logo {
			width: 180rpx;
			height: 180rpx;
		}
		
		.title {
			margin-top: 30rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #8A9EA8; // 莫兰迪灰蓝色文字
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.form-box {
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 40rpx;
		border: 6rpx solid #D1C8BC; // 莫兰迪淡棕色边框
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}
	
	.input-group {
		margin-bottom: 30rpx;
		
		.label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.input {
			height: 90rpx;
			background-color: #f8f8f8;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			border: 2rpx solid #8A9EA8; // 莫兰迪灰蓝色边框
		}
	}
	
	.login-btn {
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(135deg, #8A9EA8, #B6C5CD); // 莫兰迪灰蓝渐变
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 50rpx;
		border: 2rpx solid #D1C8BC; // 莫兰迪淡棕色边框
		
		&[disabled] {
			opacity: 0.6;
		}
	}
	
	.register-link {
		text-align: center;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #8A9EA8; // 莫兰迪灰蓝色文字
	}
	
	// 新疆传统花纹装饰
	.pattern-decoration {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background-image: radial-gradient(circle, #A8B2B9 10%, transparent 30%),
						  radial-gradient(circle, #A8B2B9 10%, transparent 30%);
		background-size: 40rpx 40rpx;
		background-position: 0 0, 20rpx 20rpx;
		opacity: 0.5;
	}
	
	.top-left {
		top: 20rpx;
		left: 20rpx;
	}
	
	.top-right {
		top: 20rpx;
		right: 20rpx;
		transform: rotate(90deg);
	}
	
	.bottom-left {
		bottom: 20rpx;
		left: 20rpx;
		transform: rotate(270deg);
	}
	
	.bottom-right {
		bottom: 20rpx;
		right: 20rpx;
		transform: rotate(180deg);
	}
</style> 
